<article class="module-myorder module-myorder-certification">
    <div class="layout-content-box">
        <div class="order-tab">
            <span class="tab-unpay" :class="{'active': status === CONFIG.TRADE_STATUS_UNPAY.KEY}" @click="changeTab(CONFIG.TRADE_STATUS_UNPAY.KEY)">未付款</span>
            <span class="tab-paid" :class="{'active': status === CONFIG.TRADE_STATUS_PAID.KEY}" @click="changeTab(CONFIG.TRADE_STATUS_PAID.KEY)">已付款</span>
            <span class="tab-completed" :class="{'active': status === CONFIG.TRADE_STATUS_COMPLETED.KEY}" @click="changeTab(CONFIG.TRADE_STATUS_COMPLETED.KEY)">已完成</span>
            <span class="tab-complainning" :class="{'active': status === CONFIG.TRADE_STATUS_COMPLAINNING.KEY}" @click="changeTab(CONFIG.TRADE_STATUS_COMPLAINNING.KEY)">申訴中</span>
        </div>
        <loading v-if="isLoading"></loading>
        <div class="m-table-flex" v-if="isLoading === false">
            <div class="order-item" v-for="item in orderList">
                <div class="item-header buy fn-flex-center">
                    <div class="header-asset fn-flex-center">
                        <span class="header-asset-code">{{item.assetCode}}</span>
                        <span class="header-asset-type">買入</span>
                        <span class="header-asset-id">|&nbsp;&nbsp;訂單號：{{ item.transOrderId }}</span>
                    </div>
                    <span class="header-right" v-if="status === CONFIG.TRADE_STATUS_UNPAY.KEY">請在 <b class="header-right-time">{{$$moment(item.leftDate).format('mm:ss')}}</b>
                        分鐘內完成付款，否則訂單將超時關閉</span>
                    <span class="header-right" v-if="status === CONFIG.TRADE_STATUS_COMPLETED.KEY">完成時間：{{
                        $$moment(item.updateDate).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </div>
                <div class="item-detail fn-flex-xcenter">
                    <div class="item-detail-col" style="width: 20%;">
                        <span>交易時間</span>
                        <span>{{ $$moment(item.createDate).format('YYYY-MM-DD HH:mm:ss') }}</span>
                    </div>
                    <div class="item-detail-col" style="width: 27%;">
                        <span class="col-name">收款賬號（賣家 {{ item.sellNickname }}）<br />
                            <!-- 联系方式：{{item.sellPhone}} -->
                        </span>
                        <div class="col-account" v-if="item.dto.c2cPayType === 'ALIPAY'">
                            <span class="col-account-paytype">支付寶&nbsp;&nbsp;{{ item.dto.name }} | {{ item.dto.alipayNo
                                }}</span>
                            <span class="col-account-paycode">付款碼：{{ item.payCode }}</span>
                        </div>
                        <div class="col-account" v-if="item.dto.c2cPayType === 'BANK'">
                            <span class="col-account-paytype">{{ item.dto.bank }} | {{ item.dto.subBank }}</span>
                            <span class="col-account-name">{{ item.dto.name }} | {{ item.dto.acnumber }}</span>
                            <span class="col-account-paycode">付款碼：{{ item.payCode }}</span>
                        </div>
                    </div>
                    <div class="item-detail-col" style="width: 20%;">
                        <span>交易價格</span>
                        <span>{{ item.tradePrice }} {{item.currency}}/{{ item.assetCode }}</span>
                    </div>
                    <div class="item-detail-col" style="width: 15%;">
                        <span>數量</span>
                        <span>{{ item.number }} {{item.assetCode}}</span>
                    </div>
                    <div class="item-detail-col" style="width: 18%;">
                        <span>金額</span>
                        <span class="col-money"><b class="col-money-amount">{{ item.money }}</b> <b class="col-money-unit">{{item.currency}}</b></span>
                    </div>
                </div>
                <div class="item-footer fn-flex-center">
                    <div class="item-footer-remark">備註：{{ item.remark }}</div>
                    <div class="item-footer-btns" v-if="status === CONFIG.TRADE_STATUS_UNPAY.KEY">
                        <a href="javascript:;" class="ui-btn" @click="confirmPay(item)">確認支付</a>
                        <span class="btns-white" @click="cancelOrder(item, $event)">取消訂單</span>
                    </div>
                    <div class="item-footer-btns" v-if="status === CONFIG.TRADE_STATUS_PAID.KEY">
                        <span>等待賣家打幣</span>
                        <span class="ui-btn" @click="toComplain(item.transOrderId,'myBuyOrder')">申訴</span>
                    </div>
                    <div class="item-footer-btns" v-if="status === CONFIG.TRADE_STATUS_COMPLETED.KEY">
                        <span>{{ item.status }}</span>
                        <!-- <span class="ui-btn" @click="toComplain(item.transOrderId, 'myBuyOrder')">申訴</span> -->
                    </div>
                    <div class="" v-if="status === CONFIG.TRADE_STATUS_COMPLAINNING.KEY">申訴時間：{{
                        $$moment(item.updateDate).format('YYYY-MM-DD HH:mm:ss') }}</div>
                </div>
            </div>

            <no-data v-if="isLoading === false && orderList && orderList.length === 0"></no-data>
            <pager :page-no="condition.pageNo" :page-size="condition.pageSize" :on-page-change="changePage" :page-num="pageNum"></pager>
        </div>

        <pay-dialog v-if="showDialog" v-on:hide="hideDialog" :current-order="currentOrder"></pay-dialog>
    </div>
</article>